<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="utf-8" />
	<link rel="icon" href="assets/favicon.png" />
	<title>Keep markup ▲ Prism plugins</title>
	<base href="../.." />
	<link rel="stylesheet" href="assets/style.css" />
	<link rel="stylesheet" href="themes/prism.css" data-noprefix />

	<style type="text/css">
		code[class*="language-"] mark,
		pre[class*="language-"] mark {
			display: inline-block;
			color: inherit;
			background: none;
			border: 1px solid #000;
			box-shadow: 0 0 2px #fff;
			padding: 1px;
			background: rgba(0,0,0,0.2);
		}
	</style>

	<script src="assets/vendor/prefixfree.min.js"></script>

	<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
	<script src="https://www.google-analytics.com/ga.js" async></script>
</head>
<body class="language-none">

<header data-plugin-header="keep-markup"></header>

<section>

	<h1>How to use</h1>

	<p>You have nothing to do. The plugin is active by default. With this plugin loaded, all markup inside code will be kept.</p>

	<p>However, you can deactivate the plugin for certain code element by adding the <code>no-keep-markup</code> class to it. You can also deactivate the plugin for the whole page by adding the <code>no-keep-markup</code> class to the body of the page and then selectively activate it again by adding the <code>keep-markup</code> class to code elements.</p>

	<h2>Double highlighting</h2>

	<p>Some plugins (e.g. <a href="plugins/autoloader">Autoloader</a>) need to re-highlight code blocks. This is a problem for Keep Markup because it will keep the markup of the first highlighting pass resulting in a lot of unnecessary DOM nodes and causing problems for themes and other plugins.</p>

	<p>This problem can be fixed by adding a <code>drop-tokens</code> class to a code block or any of its ancestors. If <code>drop-tokens</code> is present, Keep Markup will ignore all <code class="language-css">span.token</code> elements created by Prism.</p>

	<h1>Examples</h1>

	<p>The following source code</p>
	<pre><code class="language-markup">&lt;pre>&lt;code class="language-css">
@media &lt;mark>screen&lt;/mark> {
	div {
		&lt;mark>text&lt;/mark>-decoration: &lt;mark>&lt;mark>under&lt;/mark>line&lt;/mark>;
		back&lt;mark>ground: url&lt;/mark>('foo.png');
	}
}&lt;/code>&lt;/pre></code></pre>

	<p>would render like this:</p>
	<pre><code class="language-css">
@media <mark>screen</mark> {
	div {
		<mark>text</mark>-decoration: <mark><mark>under</mark>line</mark>;
		back<mark>ground: url</mark>('foo.png');
	}
}</code></pre>

	<p>
		It also works for inline code:
		<code class="language-javascript">v<mark>ar b</mark>ar = <mark>func</mark>tion () { <mark>/*</mark> foo <mark>*</mark>/ };</code>
	</p>

</section>

<footer data-src="assets/templates/footer.html" data-type="text/html"></footer>

<script src="prism.js"></script>
<script src="plugins/keep-markup/prism-keep-markup.js"></script>
<script src="assets/vendor/utopia.js"></script>
<script src="components.js"></script>
<script src="assets/code.js"></script>

</body>
</html>
